<template>
  <div>
    <div class="box">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-row :gutter="10">
            <el-col :span="10">
              <div
                v-for="item in shop.productImageList"
                :key="item.id"
              >
                <img
                  :src="'http://139.198.178.82:9090/Shopping/'+item.url"
                  alt="图片找不到了"
                >
              </div>
            </el-col>
            <el-col :span="14">
              <img
                :src="'http://139.198.178.82:9090/Shopping/' + shop.defaultImg"
                style="width:100%"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <p>{{ shop.name }}</p>
          <p style="font-size:13px;color:gray">
            <el-tag type="info">{{shop.generalExplain}}</el-tag>
          </p>
          <div class="price_box">
            <p class="jiage">
              价格:
              <span class="price">￥{{ shop.shopPrice / 100 }}</span>
              <span class="line_price">￥{{ shop.price / 100 }}</span>
            </p>
          </div>
          <!-- 规格1 -->
          <p v-if="this.SKU!=''">{{ SKU[0].name }}:</p>
          <div v-if="this.SKU!=''">
            <el-radio-group
              v-model="skufirst"
              @change="selectSku"
            >
              <el-radio-button
                v-for="items in SKU[0].optionValueList"
                :key="items.id"
                :label="items.id"
              >
                {{items.name}}
              </el-radio-button>
            </el-radio-group>
          </div>
          <!-- 规格2 -->
          <p v-if="this.SKU!=''">{{ SKU[1].name }}:</p>
          <div v-if="this.SKU!=''">
            <el-radio-group
              v-model="skusecond"
              @change="selectSku"
            >
              <el-radio-button
                v-for="two in SKU[1].optionValueList"
                :key="two.id"
                :label="two.id"
              >
                {{two.name}}
              </el-radio-button>
            </el-radio-group>
          </div>
          <!-- 规格 -->
          <div>
            <p>数量：</p>
            <el-input-number
              v-model="num"
              :min="1"
              :max="99"
            ></el-input-number>
            &nbsp;&nbsp;&nbsp;<span>库存:{{kucun<0?'0':kucun}}</span>
          </div>
          <!-- 加入购物车、购买 -->
          <div style="margin-top:25px">
            <el-button
              type="warning"
              plain
              @click="joincar"
            >加入购物车</el-button>
            <el-button type="warning">购买</el-button>
            <!-- 未收藏 -->
            <el-button
              @click="Favorite"
              v-if="this.isFavorite == 0"
            >
              <i class="el-icon-star-off"></i>
            </el-button>
            <!-- 已收藏 -->
            <el-button
              @click="Favorite"
              type="warning"
              plain
              v-else
              class="btn"
            >
              <i class="el-icon-star-on"></i>
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-tabs
        type="card"
        v-model="activeName"
      >
        <el-tab-pane
          label="宝贝详情"
          name="宝贝详情"
        >
          <el-row :gutter="10">
            <el-col :span="18">
              <span v-html="shop.explain"></span>
            </el-col>
            <el-col :span="6">
              <h3>猜你喜欢</h3>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane
          label="商品评论"
          name="商品评论"
        >
          <!-- 评论列表 -->
          <div
            v-for="pl in pinglun"
            :key="pl.id"
          >
            <p>
              {{ pl.user.nickname }}——{{ pl.createTime }}
              <el-rate
                v-model="pl.stars"
                disabled
              ></el-rate>
            </p>
            <p>{{ pl.content }}</p>
          </div>
          <!-- 添加评论 -->
          <h3>添加评论</h3>
          <el-input
            type="textarea"
            v-model="addpl"
            placeholder="请输入你的评论"
          ></el-input>
          <el-rate v-model="stars"></el-rate>
          <p style="text-align:right">
            <el-button
              type="primary"
              @click="addpinglun"
            >评论</el-button>
          </p>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "shopdetail",
  data() {
    return {
      shopid: "",
      shop: [],
      num: 1,
      img: [],
      isFavorite: 0,
      wishlisId: "",
      activeName: "宝贝详情",
      pinglun: [],
      addpl: "",
      stars: 0,
      SKU: [],
      radio1: "",
      skuStr: "",
      skufirst: "",
      skusecond: "",
      kucun: "",
      skuJson: "",
      skuId: "",
    };
  },
  methods: {
    // 获取当前商品的sku
    test(id) {
      this.skuStr += id + "_";
      console.log(this.skuStr);
    },
    getinfo() {
      this.$post(this.url + "/product/detail", {
        id: parseInt(this.shopid),
      }).then((res) => {
        this.shop = res.data;
        console.log(this.shop);
      });
    },
    getimg() {
      this.$get(
        "http://139.198.178.82:9090/Shopping/api/v1/product/get_images/988",
        {}
      ).then((res) => {
        if (res.errorCode == "0") {
          this.img = res.data.images;
        }
      });
    },
    // 加入购物车
    joincar() {
      if (this.$store.state.user == null) {
        this.$message.warning("请登录后再加入购物车");
        this.$router.push("/login/login_form");
      } else if (this.SKU != "") {
        if (this.skuJson == "") {
          this.$message.warning("请选择商品规格");
        } else if (this.kucun == 0) {
          this.$message.warning("该商品暂时没有库存，请选择其他规格");
        }
        // 有商品规格
        else {
          this.$post(this.url + "/cart/addCart", {
            orderItem: {
              userId: this.$store.state.user.id,
              productId: this.shopid,
              quantity: this.num,
              skuId: this.skuId,
              jsonData: this.skuJson,
              optionValueKeyGroup: this.skuStr,
            },
            userId: this.$store.state.user.id,
          }).then((res) => {
            if (res.errorCode == "0") {
              this.$message.success("添加成功，请到购物车查看");
            }
          });
        }
      }
      // 无商品规格
      else {
        this.$post(this.url + "/cart/addCart", {
          orderItem: {
            userId: this.$store.state.user.id,
            productId: this.shopid,
            quantity: this.num,
          },
          userId: this.$store.state.user.id,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.$message.success("添加成功，请到购物车查看");
          }
        });
      }
    },
    // 获取用户收藏表
    getfavorite() {
      this.$post(this.url + "/wish/select", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        res.data.forEach((element) => {
          if (this.shopid == element.product.id) {
            this.isFavorite = 1;
            this.wishlisId = element.id;
          }
        });
      });
    },
    // 收藏
    Favorite() {
      if (this.$store.state.user == null) {
        this.$message.warning("请登录后再收藏");
        this.$router.push("/login/login_form");
      } else {
        if (this.isFavorite == 1) {
          this.$post(this.url + "/wish/delete", {
            userId: this.$store.state.user.id,
            id: this.wishlisId,
          }).then((res) => {
            this.$message.success("取消收藏成功");
            this.isFavorite = 0;
          });
        } else {
          this.$post(this.url + "/wish/add", {
            userId: this.$store.state.user.id,
            productId: this.shopid,
          }).then((res) => {
            this.$message.success("收藏成功");
            this.isFavorite = 1;
          });
        }
      }
    },
    // 获取商品规格
    getsku() {
      console.log(this.url + "sku/option");
      this.$post(this.url + "/sku/option", {
        productId: this.shopid,
      }).then((res) => {
        this.SKU = res.data;
      });
    },
    // 获取商品评论
    getpinglun() {
      this.$post(this.url + "/product/comment", {
        productId: this.shopid,
        order: "DESC",
      }).then((res) => {
        if (res.errorCode == "0") {
          this.pinglun = res.data;
        }
      });
    },
    // 添加评论
    addpinglun() {
      if (this.$store.state.user == null) {
        this.$message.warning("请登录后再评论");
        this.$router.push("/login/login_form");
      } else {
        if (this.addpl == "") {
          this.$message.warning("评论内容不能为空");
        } else if (this.stars == "0") {
          this.$message.warning("评分不能为空");
        } else {
          this.$post(this.url + "/product/insertComment", {
            userId: this.$store.state.user.id,
            productId: this.shopid,
            content: this.addpl,
            stars: this.stars,
          }).then((res) => {
            if (res.errorCode == "0") {
              this.$message.success("添加成功，请等待审核");
              this.stars = 0;
              this.addpl = "";
            }
          });
        }
      }
    },
    // 添加足迹
    addhistory() {
      if (this.$store.state.user != null) {
        this.$post(this.url + "/insertFoot", {
          userId: this.$store.state.user.id,
          productId: this.shopid,
        }).then((res) => {
          console.log(123);
        });
      }
    },
    selectSku() {
      this.skuStr = this.skufirst + "_" + this.skusecond;
      if (this.shop.skuList != null) {
        this.shop.skuList.forEach((element) => {
          if (this.skuStr == element.optionValueKeyGroup) {
            this.shop.shopPrice = element.price;
            this.kucun = element.quantity;
            this.skuJson = element.skuJson;
            this.skuId = element.id;
          }
        });
      }
    },
  },
  created() {
    this.shopid = parseInt(sessionStorage.getItem("shopid"));
    if (this.$store.state.user != null) {
      this.getfavorite();
      this.addhistory();
    }
    this.getinfo();
    this.getimg();
    this.getsku();
    this.getpinglun();
  },
};
</script>

<style scoped>
.box {
  width: 80%;
  margin: 0 auto;
}
.price {
  font-size: 25px;
  color: orange;
}
.line_price {
  text-decoration: line-through;
}
.jiage {
  text-indent: 20px;
  color: gray;
}
.price_box {
  height: 60px;
  line-height: 60px;
  background-color: rgb(255, 247, 242);
}
.btn {
  color: orange;
}
p {
  margin: 10px;
}
</style>
